<template>
  <!-- 注册页面 -->
  <div>
    <h1>注册</h1>
    <n-space vertical>
      <n-input
        ref="inputInstUserName"
        type="text"
        placeholder="请输入用户名称"
        v-model:value="LoginFrom.userName"
        :allow-input="onlyAllowNumber"
        @blur="handleBlur"
        passively-activated
        size="large"
      />
      <n-input
        ref="inputInstPassword"
        type="password"
        v-model:value="LoginFrom.password"
        show-password-on="mousedown"
        @blur="handleBlur"
        placeholder="密码"
        :maxlength="8"
        size="large"
      />
    </n-space>
    <n-button type="primary" @click="register(LoginFrom)"> 确认 </n-button>
    <n-button type="info" @click="handleClear"> 清空 </n-button>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { NSpace, NInput, NButton, createDiscreteApi } from "naive-ui";
import { getRequest, postRequest } from "../http/request";

export default defineComponent({
  data() {
    return {
      LoginFrom: {
        // 用户名称
        userName: "",
        // 密码
        password: "",
      },
    };
  },
  setup() {
    const message = createDiscreteApi(["message"]).message;
    const inputInstPassword = ref(null);
    const inputInstUserName = ref(null);
    return {
      // 注册
      register(LoginFrom) {
        console.log("发送请求");
        postRequest(LoginFrom,`/sysUser/register`).then((res) => {
          if (res.data.code == 500) {
            message.error(res.data.message);
          }
          if (res.data.code == 200) {
            message.success(res.data.message);
          }
          this.$router.push("/login");
        });
      },
      //聚焦
      handleBlur() {
        message.info("请输入用户名称和密码");
      },
      // 只能输入数字
      onlyAllowNumber: (value) => !value || /^\d+$/.test(value),
      //清空
      inputInstPassword,
      inputInstUserName,
      handleClear() {
        console.log("测试");
        inputInstPassword.value?.clear();
        inputInstUserName.value?.clear();
      },
    };
  },
  components: {
    NSpace,
    NInput,
    NButton,
  },
});
</script>

<style>
</style>